<style lang="less" scoped>
  .table__con {
    position: relative;
  }
</style>

<template>
  <el-dialog :visible.sync="currentShowFlag" append-to-body fullscreen :close-on-click-modal="false" :close-on-press-escape="false" @open="handleDialogOpen" @closed="handleDialogClosed">
    <div slot="title" class="detail-dialog__header">{{$t('debt_balance.importlog.detailDialog')}}</div>
    <div>
      <div class="table__con" :style="{height: tableConHeight}">
        <simple-table :table-column="tableColumn" :table-data="tableData" :pageable="false">
          <template slot-scope="scope" slot="status">
            {{$getDictLabel({type: 'message_status', value: scope.row.status})}}
          </template>
        </simple-table>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="handleDialogClose">{{ $t('operation.close') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>

const BASEURL = {
  importlog: '/api/business/implog/demoImpLog/list'
}
export default {
  name: 'debt_balance_importlog',
  data () {
    return {
      tableData: [],
      tableConHeight: '0px'
    }
  },
  inject: ['handleDataSearch'],
  computed: {
    currentShowFlag: {
      get () { return this.showFlag },
      set (val) { this.$emit('update:showFlag', val) }
    },

    tableColumn () {
      let baseTableColumn = [
        { prop: 'fileName', label: this.$t('debt_balance.importlog.fileName'), width: 150 },
        { prop: 'lineNo', label: this.$t('debt_balance.importlog.lineNo'), width: 60 },
        { prop: 'message', label: this.$t('debt_balance.importlog.message') },
        { prop: 'impUser.name', label: this.$t('debt_balance.importlog.impUser'), width: 100 },
        { prop: 'impDate', label: this.$t('debt_balance.importlog.impDate'), width: 100 },
        { prop: 'status', label: this.$t('debt_balance.importlog.status'), width: 80, slotName: 'status' }
      ]
      return baseTableColumn
    }
  },
  props: {
    showFlag: { type: Boolean, default: false }
  },
  methods: {
    handleDialogClose () {
      this.currentShowFlag = false
    },

    handleDialogOpen () {
      this.$nextTick(() => {
        this.calTableHeight()
      })

      let loadingFlag = this.$loading({ target: this.$el.querySelector('.el-dialog') })

      this.$axios
        .post(BASEURL.importlog, { businessType: 'business_imp_type_zcfz' })
        .then(resp => {
          let respData = resp.data
          this.tableData = respData.list
        })
        .finally(() => {
          loadingFlag.close()
        })
    },

    // 计算table高度
    calTableHeight () {
      let mainHeight = this.$el.querySelector('.el-dialog__body').offsetHeight - 20
      // dialog内容总高度
      this.tableConHeight = mainHeight + 'px'
    },

    handleDialogClosed () {
      this.tableData.splice(0)
    }
  }
}
</script>
